<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS 揭秘 第2章</title>
  <link rel="stylesheet" href="css-secrets-2.css">
</head>
<body>
  <h2>1.半透明边框</h2>
  <div class="example-1">
    <div class="box">
      设置 background-clip 展示半透明 border
    </div>
  </div>

  <h2>2.多重边框</h2>
  <div class="example-2">
    <div class="shadow">
      采用 box-shadow 实现，多重边框
    </div>
    <div class="outline">
      采用 outline 实现，多重边框
    </div>
  </div>

  <h2>3.灵活的背景定位</h2>
  <div class="example-3">
    <div class="bg-origin">
      设定 background-origin
    </div>
    <div class="calc">
      使用 calc 语法
    </div>
  </div>

  <h2>5.条纹背景</h2>
  <div class="example-5">
    <div class="vertical-horizontal">
      水平、垂直条纹使用 linear-gradient
    </div>
    <div class="oblique">
      倾斜条纹使用 repeating-linear-gradient
    </div>
    <div class="overlay">
      优先采用半透明叠加
    </div>
  </div>
</body>
</html>
